import React, { useState } from "react";
import { Row, Col } from 'antd';

import { useThemeToken } from "@/constants";

import DeptTree from "../../components/DeptTree";
import List from "./List";

const User: React.FC = () => {
  const { themeToken } = useThemeToken();
  const [deptId, setDeptId] = useState<number>();

  return <div className="h-full overflow-hidden">
    <Row style={{ height: "100%" }} gutter={5}>
      <Col span={5} style={{ height: "100%", backgroundColor: themeToken.proTableToken.headerBgColor }}>
        <DeptTree
          isAllowCancelSelected={false}
          onOrgChange={(deptId) => {
            setDeptId(deptId);
          }}
        />
      </Col>

      <Col span={19} style={{ height: "100%" }}>
        {deptId && <List deptId={deptId} />}
      </Col>
    </Row>
  </div>
}

export default User;
